<template>
  <div class="log">
    <div class="container">
      <div class="form-horizontal" style="max-width:700px;min-width:280px;margin:0 auto;">
        <div class="form-group">
          <div class="col-sm-13">
            <input type="text" v-model="phone" class="form-control" name placeholder="手机号">
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-13">
            <input type="password" class="form-control" v-model="pas" name placeholder="请输入密码">
          </div>
        </div>
        <div class="form-group col-sm-13">
          <div class="btn col-sm-12" @click="log">登录</div>
        </div>
        <div class="alert alert-success bounceIn" v-if="sec">登录成功！</div>
        <div class="d-flex justify-content-between">
          <router-link to="/reg">去注册</router-link>
          <router-link to="/wpas" style="color:red;">忘记密码？</router-link>
          <router-link to="/echart" style="color:red;">图表</router-link>
          <router-link to="/biao" style="color:red;">表</router-link>
        </div>
      </div>
    </div>
    
  </div>
</template>

<script>
import { login } from "../../api/api.js";
export default {
  name: "log",
  data() {
    return {
      sj: "",
      show: true,
      timer: null,
      phone: "",
      pas: "",
      sec: false
    };
  },
  created() {},
  methods: {
    //   倒计时
    dao() {
      this.show = false;
      const TIME_COUNT = 1;
      if (!this.timer) {
        this.sj = TIME_COUNT;
        this.show = false;
        this.timer = setInterval(() => {
          if (this.sj > 0 && this.sj <= TIME_COUNT) {
            this.sj--;
          } else {
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
            this.$router.push("/");
          }
        }, 1000);
      }
    },
    // 点击登录
    log() {
      // this.sec=true
      if (this.phone == "" || this.pas == "") {
        alert("请填完整账号及密码");
      } else if (!/^1[3456789]\d{9}$/.test(this.phone)) {
        alert("手机号码有误");
      } else {
        login({
          phoneNumbers: this.phone,
          password: this.pas
        }).then(res => {
          if (res.data == true) {
            // console.log(res.data);
            // this.$router.push("/");
            this.sec = true;
            this.dao();
            console.log(res);
          } else {
            alert("登陆失败");
          }
        });
      }
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.log {
  width: 100%;
  border-radius: 5px;
  background-color: #f8f8f8;
  padding: 30px;
}
input {
  border: none;
}

.col-center-block {
  float: none;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.btn {
  height: 50px;
  line-height: 40px;
  background-color: #fa440cd8;
  border: none;
  color: #fff;
}
.btn:hover {
  background: #ff3c00;
}
.code {
  background: #fff;
  line-height: 35px;
  margin-bottom: 15px;
}
</style>
